(function() {
  'use strict';

  define(["../app", "jquery", "jquery-cycle2"], function(AMail, $) {
    AMail.directive('slideShow', ["$timeout", function($timeout) {
      return {
        restrict: 'E',
        templateUrl: "../templates/directives/SlideShow.html",
        replace: true,
        link: function(scope, iElement) {
          $timeout(function () {
            var element = $(iElement);
            var desEl = iElement.find(".update h3");
            desEl.text(scope.pages[0].desc);
            
            var cycle_slide = element.find("ul");
            cycle_slide.cycle({
              caption: '#cycle-slidenum',
              "caption-template": '{{slideNum}} / {{slideCount}}',
              timeout: 5000,
              fx: 'fade',
              prev: '.cycle-prev',
              next: '.cycle-next',
              slides: '> li',
              hideNonActive: false
            });

            var update = element.find(".update h3");
            var link = element.find(".update a");

            cycle_slide.on("cycle-after", function (e, me) {
              scope.curDesc = scope.pages[me.slideNum - 1].desc;

              update.removeClass("slideIn");
              link.removeClass("slideIn");
              update.addClass("slideOut");
              link.addClass("slideOut");

              setTimeout(function () {
                update.text(scope.curDesc);
              }, 500);
              setTimeout(function () {
                
                update.removeClass("slideOut");
                link.removeClass("slideOut");
                
                update.addClass("slideIn");
                link.addClass("slideIn");

              }, 700);
            });
          }, 1000);
        }
      };
    }]);
  });
}).call(this);